<template>
  <div class="bold-pie" :id="id"></div>
</template>

<script>
  import echarts from 'echarts/lib/echarts'
  import 'echarts/lib/chart/pie'
  import { numberFormat } from '../../utils/public'

  export default {
    props: {
      id: {
        type: String,
        required: true
      },
      areaColor: {
        type: Array,
        required: true
      },
      legend: {
        type: Array,
      },
      data0: {
        type: [Number, String]
      },
      data1: {
        type: [Number, String]
      }
    },
    watch: {
      data0 (val, oldval) {
        this.onReady()
      }
    },
    data () {
      return {
        headerColor: '#63e3ee'
      }
    },
    mounted () {
      this.onReady()
    },
    methods: {
      onReady () {
        const { id, legend, data0, data1, areaColor } = this
        const options = {
          tooltip : {
            trigger: 'item',
            position: 'right',
            formatter: "{b} : {c} ({d}%)"
          },
          series : [
            {
              type:'pie',
              radius : '80%',
              center: ['50%', '50%'],
              data:[
                {
                  value:data0,
                  name:legend[0],
                  label: {
                    normal: {
                      show: true,
                      position: 'inside',
                      textStyle: {
                        color: '#ffffff',
                        fontSize: 10
                      },
                      formatter: function (obj) {
                        return `${obj.percent}%`
                      }
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: areaColor[0],
                      shadowBlur: 200,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                },
                {
                  value:data1,
                  name:legend[1],
                  label: {
                    normal: {
                      show: true,
                      position: 'inside',
                      textStyle: {
                        color: '#ffffff',
                        fontSize: 10
                      },
                      formatter: function (obj) {
                        return `${obj.percent}%`
                      }
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: areaColor[1],
                      shadowBlur: 200,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ],

              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200
              }
            }
          ]
        }
        const myBlodPie = echarts.init(document.getElementById(id))
        myBlodPie.setOption(options, true)
        window.addEventListener('resize', function () {
          myBlodPie.resize()
        })
      }
    }
  }
</script>

<style lang="css" scoped>
  .bold-pie {
    width: 100%;
  }
</style>
